<template>
    <div class="container">
        <div class="menu-container">
            <h1>评论内容</h1>
            <ul>
                <li v-for="(menuItem, index) in menuItems" :key="index">
                    <RouterLink :to="{
                        name: 'xiang',
                        params: {
                            id: menuItem.id,
                            name: menuItem.name,
                            link: menuItem.link
                        }

                    }" active-class="ac">{{ menuItem.name }}</RouterLink>
                </li>
            </ul>
        </div>
        <div class="content-container">
            <RouterView />
        </div>
    </div>
</template>

<script lang="ts" setup name="Comment">
import { RouterLink, RouterView } from "vue-router";
import { ref } from "vue";

const menuItems = ref([
    { id: 1, name: '社会', link: '啊啊啊啊' },
    { id: 2, name: '科学', link: '爱谁谁' },
    { id: 3, name: '教育', link: '请淇水汤汤' },
    { id: 4, name: '医疗', link: null }
]);
</script>

<style>
.container {
    display: flex;
    justify-content: space-between;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.menu-container {
    width: 20%;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
}

.content-container {
    width: 65%;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

li {
    margin-bottom: 10px;
}
</style>